<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="60%">
    <el-form ref="dataForm" :model="infoForm" :rules="rules" label-width="120px">
      <el-form-item :label="$t('ProductName')" prop="productName">
        <el-select v-model="infoForm.productName" clearable>
          <el-option
            v-for="item in productNameList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('station')" prop="station">
        <el-select v-model="infoForm.station" clearable>
          <el-option
            v-for="item in stationList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('result')" prop="result">
        <div class="result-item">
          <div class="result-pass">
            <el-form-item prop="passResult">
              <el-input v-model="infoForm.passResult" style="width: 140px" clearable/>
              <span>Pass</span>
            </el-form-item>
          </div>
          <div class="result-fail">
            <el-form-item prop="failResult">
              <el-input v-model="infoForm.failResult" style="width: 140px" clearable/>
              <span>Fail</span>
            </el-form-item>
          </div>
        </div>
      </el-form-item>
      <el-form-item :label="$t('remark')" prop="remark">
        <el-input v-model="infoForm.remark" type="textarea" rows="2"/>
      </el-form-item>
    </el-form>
    <div class="opt-btns">
      <h4>参数Spec</h4>
      <el-button type="success" @click="handleAddCol">{{ $t('add') }}</el-button>
    </div>
    <dynTable
      ref="dynTable"
      :loading="false"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
    <span slot="footer">
      <el-button
        icon="el-icon-circle-close"
        @click="handleClose"
      >{{ $t("cancel") }}</el-button>
      <el-button
        v-btnThrottle="doSave"
        type="primary"
        icon="el-icon-receiving"
      >{{ $t("save") }}</el-button>
  </span></el-dialog>
</template>

<script>
import { getInfo, doAdd, doUpdate, getProductNameList } from '@/api/ruleConfig/SBLSetting'
import { getRemarkList } from '@/api/production/workRecord'
export default {
  name: 'SBLSettingDialog',
  data() {
    const validatePass = (rule, value, callback) => {
      callback()
    }
    return {
      dialogVisible: false,
      title: '',
      infoForm: {},
      selectList: {},
      productNameList: [],
      stationList: [],
      rules: Object.freeze(
        {
          productName: [{ required: true, message: `${this.$t('pleaseInput')}${this.$t('productName')}`, trigger: 'change' }],
          station: [{ required: true, message: `${this.$t('pleaseInput')}${this.$t('station')}`, trigger: 'change' }],
          result: [{ required: true, validator: validatePass }],
          passResult: [{ required: true, message: `${this.$t('pleaseInput')}Pass`, trigger: 'change' }],
          failResult: [{ required: true, message: `${this.$t('pleaseInput')}Fail`, trigger: 'change' }]
        }
      ),
      tableData: [],
      tableColumns: [
        { prop: 'parmName', label: this.$t('parameterName'), templete: (_scope) => {
          return (
            <el-input
              placeholder='多个以英文逗号隔开'
              vModel={_scope.row.parmName}
              clearable>
            </el-input>
          )
        } },
        { prop: 'lowLimit', label: 'Low Limt(%)', templete: (_scope) => {
          return (
            <el-input-number
              vModel={_scope.row.lowLimit}
              min={0}
              max={99.999}
              step={0.001}
              clearable>
            </el-input-number>
          )
        } },
        { prop: 'highLimit', label: 'High Limt(%)', templete: (_scope) => {
          return (
            <el-input-number
              vModel={_scope.row.highLimit}
              min={0}
              max={100.000}
              step={0.001}
              clearable>
            </el-input-number>
          )
        } },
        { prop: '', label: this.$t('action'), templete: (_scope) => {
          return (
            <el-link type='primary' underline={false}
              on-click={() => this.scopedDelete(_scope)}
            >{this.$t('delete')}</el-link>
          )
        } }
      ]
    }
  },
  methods: {
    async handleOpen(row) {
      if (row && row.id) {
        this.title = this.$t('modify')
        const res = await getInfo({ id: row.id })
        const { sblSpecList, ...obj } = res.data
        this.infoForm = obj
        this.tableData = sblSpecList
      } else {
        this.title = this.$t('add')
      }
      this.dialogVisible = true
      this.getProductNames()
      this.getStations()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    doSave() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.infoForm.id) {
            const filtertable = this.tableData.filter(item => !!item.parmName && (item.lowLimit || item.highLimit))
            doUpdate(this.$clearNull({ ...this.infoForm, sblSpecList: filtertable })).then(res => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
          } else {
            const filtertable = this.tableData.filter(item => !!item.parmName && (item.lowLimit || item.highLimit))
            doAdd(this.$clearNull({ ...this.infoForm, sblSpecList: filtertable })).then(res => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
          }
        }
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    },
    handleAddCol() {
      this.tableData.push({})
    },
    scopedDelete(row) {
      this.tableData.splice(row.$index, 1)
    },
    async getProductNames() {
      const res = await getProductNameList()
      this.productNameList = res.data
    },
    async getStations() {
      const res = await getRemarkList({ name: 'STATION' })
      this.stationList = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.opt-btns{
    display: flex;
    justify-content: space-between;
    align-content: center;
    height: 40px;
    margin-bottom: 20px;
}
.result-item{
  display: flex;
  .result-pass{
    margin-right: 20px;
  }
}
</style>
